<template>
	<div class="mod-config"  style="height: 600px;overflow: auto">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
			<el-form-item><el-input placeholder="单号" prefix-icon="el-icon-search" v-model="dataForm.key" clearable></el-input></el-form-item>
			<el-form-item>
				<el-button @click="getDataList()">查询</el-button>
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<el-select  @change="getDataList()" v-model="condition" placeholder="按天查询">
          <el-option label="所有" value="0"></el-option>
					<el-option label="今天" value="1"></el-option>
					<el-option label="昨天" value="2"></el-option>
					<el-option label="本周" value="3"></el-option>
					<el-option label="上周" value="4"></el-option>
					<el-option label="本月" value="5"></el-option>
					<el-option label="上月" value="6"></el-option>
				</el-select>
				&nbsp;&nbsp;&nbsp;
				<el-date-picker v-model="startDate" type="datetime" placeholder="开始日期"></el-date-picker>
				<el-date-picker v-model="endDate" type="datetime" placeholder="结束日期"  @change="timeQuery"></el-date-picker>
				<el-button v-if="isAuth('reception:tstoreorderrecord:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
				<el-button v-if="isAuth('reception:tstoreorderrecord:export')" type="primary" @click="exportExcel">导出本页</el-button>
				<el-button v-if="isAuth('reception:tstoreorderrecord:export')" type="primary" @click="exportExcelAll">导出所有</el-button>
			</el-form-item>
		</el-form>
		<el-table @selection-change="handleSelectionChange" :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
			<el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
			<el-table-column prop="takeoutId" header-align="center" align="center" label="订单ID"></el-table-column>
			<el-table-column prop="number" header-align="center" align="center" label="份数"></el-table-column>
			<el-table-column prop="totalMoney" header-align="center" align="center" label="总价">
				<template slot-scope="scope">
					<div style="color: red;" v-show="scope.row.totalMoney !== null">￥{{ scope.row.totalMoney }}元</div>
					<div style="color: red;" v-show="scope.row.totalMoney === null">-----</div>
				</template>
			</el-table-column>
			<el-table-column prop="discountMoney" header-align="center" align="center" label="折后价">
				<template slot-scope="scope">
					<div style="color: red;" v-show="scope.row.discountMoney !== null">￥{{ scope.row.discountMoney }}元</div>
					<div style="color: red;" v-show="scope.row.discountMoney === null">-----</div>
				</template>
			</el-table-column>
			<el-table-column prop="reallyGet" header-align="center" align="center" label="实收">
				<template slot-scope="scope">
					<div style="color: red;" v-show="scope.row.reallyGet !== null">￥{{ scope.row.reallyGet }}元</div>
					<div style="color: red;" v-show="scope.row.reallyGet === null">-----</div>
				</template>
			</el-table-column>
			<el-table-column prop="wipeZero" header-align="center" align="center" label="抹零">
				<template slot-scope="scope">
					<div style="color: red;">￥{{ scope.row.wipeZero }}元</div>
				</template>
			</el-table-column>
			<el-table-column prop="zero" header-align="center" align="center" label="找零">
				<template slot-scope="scope">
					<div style="color: red;">￥{{ scope.row.zero }}元</div>
				</template>
			</el-table-column>
			<el-table-column prop="time" header-align="center" align="center" label="时间"></el-table-column>
			<el-table-column prop="accountUnitName" header-align="center" align="center" label="挂账单位">
				<template slot-scope="scope">
					<div v-show="scope.row.accountUnitName !== null">{{ scope.row.accountUnitName }}</div>
					<div v-show="scope.row.accountUnitName === null">-----</div>
				</template>
			</el-table-column>
			<el-table-column prop="discount" header-align="center" align="center" label="折扣">
				<template slot-scope="scope">
					<div v-show="scope.row.discount !== null">{{ scope.row.discount }}</div>
					<div v-show="scope.row.discount === null">-----</div>
				</template>
			</el-table-column>
			<el-table-column prop="memberName" header-align="center" align="center" label="会员">
				<template slot-scope="scope">
					<div v-show="scope.row.memberName !== null">{{ scope.row.memberName }}</div>
					<div v-show="scope.row.memberName === null">-----</div>
				</template>
			</el-table-column>
			<el-table-column prop="payMethodName" header-align="center" align="center" label="支付方式"></el-table-column>
			<el-table-column prop="status" header-align="center" align="center" label="状态"width="90px">
				<template slot-scope="scope">
					<el-tag type="success" v-if="scope.row.status === 1">已下单</el-tag>
					<el-tag type="danger" v-if="scope.row.status === 2">派送中</el-tag>
					<el-tag type="info" v-if="scope.row.status === 3">已结账</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="remark" header-align="center" align="center" label="备注">
				<template slot-scope="scope">
					<div v-show="scope.row.remark !== ''">{{ scope.row.remark }}</div>
					<div v-show="scope.row.remark === ''">-----</div>
				</template>
			</el-table-column>
			<el-table-column fixed="right" header-align="center" align="center" width="250" label="操作">
				<template slot-scope="scope">
          <el-button type="text" @click="fanCheck(scope.row)">反结账</el-button>
          <el-button type="text" >补打小票</el-button>
					<el-button type="text" @click="orderDetail(scope.row)">详情</el-button>
					<el-button v-if="scope.row.status === 3" type="text" size="small" @click="deleteHandle(scope.row.orderId)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
			:current-page="pageIndex"
			:page-sizes="[10, 20, 50, 100]"
			:page-size="pageSize"
			:total="totalPage"
			layout="total, sizes, prev, pager, next, jumper"
		></el-pagination>

		<el-dialog title="订单详情" :visible.sync="orderDetailVisle" append-to-body :close-on-click-modal="false" width="70%" center>
			<el-row :gutter="20">
				<el-alert title="基本信息" type="success" :closable="false"></el-alert>
				<el-col :span="8">
					<el-form label-width="80px">
						<el-form-item label="订单号:">{{ orderDetailInfo.takeoutId }}</el-form-item>
						<el-form-item label="联系人:">{{ orderDetailInfo.linkMan }}</el-form-item>
						<el-form-item label="地址:">{{ orderDetailInfo.address }}</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="8">
					<el-form label-width="80px">
						<el-form-item label="时间:">{{ orderDetailInfo.time }}</el-form-item>
						<el-form-item label="操作人:">{{ orderDetailInfo.createUserName }}</el-form-item>
						<el-form-item label="联系电话:">{{ orderDetailInfo.linkTel }}</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="8">
					<el-form label-width="80px">
						<el-form-item label="份数:">{{ orderDetailInfo.number }}份</el-form-item>
						<el-form-item label="支付方式:">{{ orderDetailInfo.payMethodName }}</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row :gutter="20" v-show="orderDetailInfo.accountId !== null">
				<el-alert title="记账单位" type="success" :closable="false"></el-alert>
				<el-col :span="12">记账单位名称：{{ orderDetailInfo.accountUnitName }}</el-col>
			</el-row>
			<el-row :gutter="20" v-show="orderDetailInfo.memberId !== null">
				<el-alert title="会员" type="success" :closable="false"></el-alert>
				<el-col :span="8">会员名字：{{ orderDetailInfo.memberName }}</el-col>
				<el-col :span="8">会员昵称：{{ orderDetailInfo.memberNick }}</el-col>
				<el-col :span="8">会员卡号：{{ orderDetailInfo.memberCardNo }}</el-col>
			</el-row>
			<br />

			<el-row :gutter="20">
				<el-alert title="菜单列表" type="success" :closable="false"></el-alert>
				<el-table :data="orderDetailInfo.foodVos" style="width: 100%;">
					<el-table-column prop="foodName" label="品名">
						<template slot-scope="scope">
							<div>
								<el-tag v-show="scope.row.giveFoodStatus === 1" type="danger">赠</el-tag>
								{{ scope.row.foodName }}
							</div>
							<div style="color: forestgreen;font-size: 0.5rem;">{{ scope.row.requirementName }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="数量">
						<template slot-scope="scope">
							{{ scope.row.foodNum }}
						</template>
					</el-table-column>
					<el-table-column prop="price" label="金额">
						<template slot-scope="scope">
							<div style="color: red;">￥{{ Number(scope.row.total) }}元</div>
						</template>
					</el-table-column>
				</el-table>
			</el-row>

			<br />

			<el-row>
				<el-alert title="结账详情" type="success" :closable="false"></el-alert>
				<el-form label-width="80px">
					<el-form-item label="总价:">
						<span style="color: red;">￥{{ orderDetailInfo.totalMoney }}</span>
					</el-form-item>
					<el-form-item label="折后价:">
						<span style="color: red;">￥{{ orderDetailInfo.discountMoney }}</span>
					</el-form-item>
					<el-form-item label="实收:">
						<span style="color: red;">￥{{ orderDetailInfo.reallyGet }}</span>
					</el-form-item>
				</el-form>
			</el-row>
		</el-dialog>

    <el-dialog title="反结账" center :visible.sync="WaiMaiVisible" append-to-body width="95%">
      <WaiMai @closeDialog="closeDialog"  ref="WaiMaiRef"></WaiMai>
    </el-dialog>
	</div>
</template>

<script>
	import Blob from '../../../../../utils/vender/Blob.js'
	import Export2Excel  from 	'../../../../../utils/vender/Export2Excel.js'
  import WaiMai from "./WaiMai";
  import {dayAdd} from "../../../../../utils";
export default {
	data() {
		return {
      WaiMaiVisible:false,
			dataForm: {
				key: ''
			},
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			totalPage: 0,
			dataListLoading: false,
			dataListSelections: [],
			addOrUpdateVisible: false,
			orderDetailVisle: false,
			orderDetailInfo: {},
			startDate: null,
			endDate: null,
			condition: null,
			exceData:[]
		};
	},
	components: {WaiMai},
	// activated() {
	// 	this.getDataList();
	// },
	methods: {
    closeDialog(){
      this.WaiMaiVisible = false
    },

		exportExcel(){
			 require.ensure([], () => {
			 const { export_json_to_excel } = require('../../../../../utils/vender/Export2Excel')
			  const tHeader = ['订单ID', '份数', '总价', '折后价', '实收', '时间', '挂账单位', '折扣', '会员', '支付方式', '备注'];
			  const filterVal = ['takeoutId', 'number', 'totalMoney', 'discountMoney', 'reallyGet',
			   'time','accountUnitName', 'discount', 'memberName', 'payMethodName', 'remark'];
			    const list = this.exceData;
				const data = this.formatJson(filterVal, list);
				 export_json_to_excel(tHeader, data, '外卖');
				 })
		},

		exportExcelAll(){
			this.$http({
				url: this.$http.adornUrl('/reception/tstoretakeoutrecord/listTakeout'),
				method: 'get',
				params: this.$http.adornParams({
					current: 1,
					size: 100000,
					status: '',
					key: this.dataForm.key,
					condition: this.condition
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.exceData = data.page.records;
					this.exportExcel()
				} else {
					this.exceData = [];
				}
			});
		},

		 formatJson(filterVal, jsonData) {
		       return jsonData.map(v => {
		        return filterVal.map(j => v[j])
		       })
		    },

		handleSelectionChange(val){
			var arr = []
			val.forEach(item => {
				if(item.status === 3){
					arr.push(item)
				}
			})
			this.dataListSelections = arr;

		},
    fanCheck(row){
      if (row.status === 3){
        this.WaiMaiVisible = true
        this.$nextTick(() => {
          this.$refs.WaiMaiRef.init(row)
        })
      }else {
        this.$message.info("只有已结账单才能进行反结账")
      }
    },

    timeQuery(){
      if (this.startDate === null){
        this.$message.info("请选择开始时间")
      }else {
        this.startDate = dayAdd(this.startDate);
        this.endDate = dayAdd(this.endDate)
        this.getDataList()
      }
    },

		orderDetail(row) {
			this.orderDetailInfo = row;
			this.orderDetailInfo.foodVos = JSON.parse(row.foodVo);
			this.orderDetailVisle = true;
		},

		// 获取数据列表
		getDataList() {

			this.dataListLoading = true;
			this.$http({
				url: this.$http.adornUrl('/reception/tstoretakeoutrecord/listTakeout'),
				method: 'get',
				params: this.$http.adornParams({
					current: this.pageIndex,
					size: this.pageSize,
					key: this.dataForm.key,
					status: '',
					condition: this.condition,
					timeSelect: '',
					staffId:'',
          startDate: this.startDate,
          endDate: this.endDate
				})
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataList = data.page.records;
					this.exceData = data.page.records;
					this.totalPage = data.page.total;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
				this.dataListLoading = false;
			});
		},
		// 每页数
		sizeChangeHandle(val) {
			this.pageSize = val;
			this.pageIndex = 1;
			this.getDataList();
		},
		// 当前页
		currentChangeHandle(val) {
			this.pageIndex = val;
			this.getDataList();
		},
		// 多选
		selectionChangeHandle(val) {
			this.dataListSelections = val;
		},
		// 新增 / 修改
		addOrUpdateHandle(id) {
			this.addOrUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id);
			});
		},
		// 删除
		deleteHandle(id) {
			var ids = id
				? [id]
				: this.dataListSelections.map(item => {
						return item.id;
				  });
			this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					url: this.$http.adornUrl('/reception/tstoretakeoutrecord/delete'),
					method: 'post',
					data: this.$http.adornData(ids, false)
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.$message({
							message: '操作成功',
							type: 'success',
							duration: 1500,
							onClose: () => {
								this.getDataList();
							}
						});
					} else {
						this.$message.error(data.msg);
					}
				});
			});
		}
	}
};
</script>
